<template>
	<view>
		<view>
			<view class="toolbar">
				<view class="iconfont icon-bold" @click="toolBarClick('bold')"></view>
				<view class="iconfont icon-italic" @click="toolBarClick('italic')"></view>
				<view class="iconfont icon-xiahuaxian1" @click="toolBarClick('header')"></view>
				<view class="iconfont icon-strike" @click="toolBarClick('strike')"></view>
				<view class="iconfont icon-sup" @click="toolBarClick('sup')"></view>
				<view class="iconfont icon-link" @click="toolBarClick('link')"></view>
				<view class="iconfont icon-code" @click="toolBarClick('code')"></view>
				<view class="iconfont icon-table" @click="toolBarClick('table')"></view>
				<view class="iconfont icon-qingkong" @click="toolBarClick('clear')"></view>
				<view class="iconfont iconbaocun" @click="save"></view>
			</view>
			<view class="input-content">
				<textarea maxlength="-1" v-model="textareaData"
				 @input="changeTextData" 
				 @blur="getCursor"></textarea>
			</view>
		</view>
		<view class="preview" v-if="showPreview">
			<!-- <scroll-view scroll-y :style="'height:'+screenHeight/2.5+'px;padding:10px'">
				<wxParse :content="textareaHtml" @preview="preview" @navigate="navigate" />
			</scroll-view> -->
			<view v-html="textareaHtml">{{textareaHtml}}</view>
		</view>
	</view>
</template>

<script>
	import marked from './marked'
	import wxParse from './mpvue-wxparse/src/wxParse.vue'
	export default {
		name: "ly-markdown",
		components: {
			wxParse
		},
		data: function () {
			return {
				screenHeight: 0,
				cursor: 0,
				textareaData:"",
				textareaHtml:""
			}
		},
		props: {
			showPreview: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			save(){
				this.$emit("save")
			},
			changeTextData(item){
				// console.log(this.textareaData)
				// this.$emit('update:textareaData', item);
				// this.$emit("changeData",this.textareaData)
				// this.$emit('update:textareaHtml', this.textareaHtml);
			},
			preview(src, e) {
				uni.previewImage({
					urls: src,
				})
			},
			navigate(href, e) {
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				// #ifdef APP-PLUS
				plus.runtime.openURL(href)
				// #endif
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: href,
					success: function () {
						uni.showModal({
							content: "网址已复制,请在浏览器中粘贴打开",
							showCancel: false
						})
					}
				})
				// #endif
			},
			toolBarClick(type) {
				if (type == 'bold') {
					this.textareaData += "**粗体文字** "
				} else if (type == "italic") {
					this.textareaData += "*斜体* "
				} else if (type == "header") {
					uni.showActionSheet({
						itemList: ["标题1", "标题2", "标题3", "标题4", "标题5", "标题6"],
						success: res => {
							switch (res.tapIndex) {
								case 0:
									this.textareaData += "# 标题1\r";
									return;
								case 1:
									this.textareaData += "## 标题2\r";
									return;
								case 2:
									this.textareaData += "### 标题3\r";
									return;
								case 3:
									this.textareaData += "#### 标题4\r";
									return;
								case 4:
									this.textareaData += "##### 标题5\r";
									return;
								case 5:
									this.textareaData += "###### 标题6\r";
									return;
							}
						}
					})
				} else if (type == "underline") {
					this.textareaData += "++下划线++ "
				} else if (type == "strike") {
					this.textareaData += "~~中划线~~ "
				} else if (type == "sup") {
					this.textareaData += "^上角标^ "
				} else if (type == "sub") {
					this.textareaData += "~下角标~ "
				} else if (type == "alignleft") {
					this.textareaData += "\n::: hljs-left\n\n左对齐\n\n:::\n"
				} else if (type == "aligncenter") {
					this.textareaData += "\n::: hljs-center\n\n居中对齐\n\n:::\n"
				} else if (type == "alignright") {
					this.textareaData += "\n::: hljs-right\n\n\n\n右对齐\n\n:::\n"
				} else if (type == "link") {
					this.textareaData += "[在此输入网址描述](在此输入网址) "
				} else if (type == "imgage") {
					uni.chooseImage({
						count: 1,
						success: chooseImageRes => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.showLoading({
								mask: true,
								title: "上传中",
							})
							uni.uploadFile({
								url: '', //在此填写图片上传地址
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {},
								complete: function () {
									uni.hideLoading();
								},
								success: uploadFileRes => {
									console.log(uploadFileRes)
									var data = JSON.parse(uploadFileRes.data);
									this.textareaData += "![](" + data.data + ") "
								}
							});
						}
					})
					this.textareaData += "![](在此输入图片地址) "
				} else if (type == "code") {
					this.textareaData += "\n``` 代码块 \n\n```\n"
				} else if (type == "table") {
					this.textareaData += "\n|列1|列2|列3|\n|-|-|-|\n|单元格1|单元格2|单元格3|\n"
				} else if (type == "clear") {
					uni.showModal({
						title: "提示",
						content: "确定清空?",
						success: res => {
							if (res.confirm) {
								this.textareaData = "";
							}
						}
					})
				}
			},
			getCursor(e) {
				//安卓失去焦点获取不到cursor位置,暂不使用
				//this.cursor = e.detail.cursor; 
			}
		},
		watch: {
			"textareaData": function (newValue, oldValue) {
				this.textareaHtml = marked(newValue)
				this.$emit('changeData', newValue,this.textareaHtml)
				// this.$emit('update:textareaHtml', this.textareaHtml)
			}
		},
		onLoad: function () {
			uni.getSystemInfo({
				success: res => {
					this.screenHeight = res.screenHeight
				}
			})
		}
	}
</script>

<style scoped>
	@import '../css/markdown.css';
	@import url("./mpvue-wxparse/src/wxParse.css");
@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_2084857_qg94cangu9h.eot?t=1600755072204'); /* IE9 */
  src: url('//at.alicdn.com/t/font_2084857_qg94cangu9h.eot?t=1600755072204#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALsAAsAAAAABqwAAAKfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBOIExATYCJAMICwYABCAFhG0HMBvXBcgOJcHAwICBAgBFPHx/Pzr3/dgMysTC5sjxpCbaFdxZ4BKJAinc8f/Tfu7NUU831Hxyf/P7hpg0EU14hgSRCKERyfjEvdMmUCDzecNx7c2fugDjrQHuhVG8gAskAG+YXr7AgbhMoF6fUIK1/NJasJDTswJxqtMowKIQkstZtlYoGzbmEDckatNc+gCuo+/Hn+iwAEmRga7bPMlTQ+Z3sMkTjVaj0BqQhEFA2wtkmAFyYrcxtU4kGEOkPiU2BI5VHXwH/1eBRRz1zxMl6MpG0ANFzyR2kketTCCHgwvAyqR3IW/1ElsOvH3JxfvPuXbvr96So7eCPsnYo7+VcPTWymb+zk1kdXzvId548LM/e+q2FdnULVztXs6fj17EcFV0UZH0vvQ8TANTWOR27/Y4Oign4d5LvprgYx9jf9TiY+eTsOpoeV/nuNqwKnezboO2/zeXS+nG+EXAJWQCVGui16z6N/7GxlWkV4d96p+FtRjga+VhNApUa2IY5gG1J3MHP008sCEXUq1NVxchd7KQK5JQL7wq0L52P1N1XXfoCLUFMUNSoxeZWiPknD6DQoNZlGotot60gu0NOrBEIrcEpkwBhFZ3SJo9IdPqk5zTv1Ho9otSa4hQbz+cD2wwFjqrHBYreKxGyj6kUxEzZa28VVxdjTVdRgWbl0bMesxyuiiKCo8sZwuwGbNLLOG6NdE8TyGKJSaUD67DRiNBNEv0WMWHa3meTo6IoJruFK4iJrCyioUp8DA1RKkPoqNCmFFBa55V5fPVMI0uRgpsByEXroexOLrhkSjhIgeQC1TmQYRHuYXTTSMaj0dBKCzCBMkH4zAjIwKhm8fpYSq8cNoJCVqyCNOMGqoK315j+rttUE/rU5hRIigPFETVZQYAAA==') format('woff2'),
  url('//at.alicdn.com/t/font_2084857_qg94cangu9h.woff?t=1600755072204') format('woff'),
  url('//at.alicdn.com/t/font_2084857_qg94cangu9h.ttf?t=1600755072204') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_2084857_qg94cangu9h.svg?t=1600755072204#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconbaocun:before {
  content: "\e82a";
}

	.input-content {
		width: 100%;
	}

	.input-content textarea {
		box-sizing: border-box;
		padding: 0 15px;
		width: 100%;
		letter-spacing: 1px;
		font-size: 18px;
		height: 500upx !important;
		line-height: 1.5;
	}

	.preview {
		box-sizing: border-box;
		padding: 0 15px;
		border-top: 1px solid #e0e0e0;
		width: 100%;
		word-wrap: break-word;
	}

	.toolbar {
		width: 100%;
		border: none;
		box-shadow: 0 0px 4px rgba(0, 0, 0, 0.157), 0 0px 4px rgba(0, 0, 0, 0.227);
	}

	.toolbar .iconfont {
		display: inline-block;
		cursor: pointer;
		margin: 13px 0 11px 0px;
		font-size: 16px;
		padding: 10px 13px 11px 8px;
		color: #757575;
		border-radius: 11px;
		text-align: center;
		background: none;
		border: none;
		outline: none;
		line-height: 2.2;
		vertical-align: middle;
	}

	.input-content {
	}
</style>
